<template>
    <el-container class='home-container'>
      <!-- 头部 -->
      <el-header>
        <div>
          <span>电商管理系统</span>
        </div>
        <!-- 退出功能：type功能渲染出一个灰色的按钮 -->
        <el-button @click='layout' type='info'>退出</el-button>
      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside :width="isCollapse?' 64px':'200px'">
          <div class='toggle-button' @click='toggleCollapse'>|||</div>
          <!-- unique-opened子菜单只展开一项  :router='true'路由跳转可省略为 router(el菜单跳转)-->
          <el-menu
            :router='true'
            :collapse-transition='false'
            :collapse='isCollapse'
            unique-opened
            background-color="#333744"
            text-color="#fff"
            active-text-color="#409EFF"
            :default-active="activePath"

            >
            <!-- default-active点击链接的时候如用户列表,将对应的地址保存到sessionstrage中，当刷新页面的时候将值取出来使用（当home组件刚被创建的时候，立即将值取出赋值给左侧菜单） -->
            <!-- 一级菜单 -->
            <!-- 当点击一级导航的时候会将所有的二级导航都打开，是因为所有的一级菜单都一样，需要不同的的标志:index=接收字符串  侧边栏路由改造:index="'/'+value.path加/是为了匹配路径-->
            <el-submenu :index="item.id +''" v-for='item in menuList' :key='item.id'>
              <template slot="title">
                <i :class="iconObj[item.id]"></i>
                <span>{{item.authName}}</span>
              </template>
                <!-- 二级菜单 -->

                <el-menu-item :index="'/'+value.path" v-for='value in item.children' :key='value.id' @click="saveNavState('/'+value.path)">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>{{value.authName}}</span>
                  </template>
                </el-menu-item>
            </el-submenu>

          </el-menu>
        </el-aside>
        <!-- 主体 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

</template>

<script>
export default {
  data () {
    return {
      menuList: [],
      iconObj: {
        125: 'iconfont icon-tianjiayonghu',
        103: 'iconfont icon-shouye',
        101: 'iconfont icon-rili',
        102: 'iconfont icon-shezhi',
        145: 'iconfont icon-mima'
      },
      isCollapse: false,
      // 动态获取的路径值:当整个home组件被创建的时候赋值，也就是create执行的时候
      activePath: ''
    }
  },
  methods: {
    // 清除token，并跳转
    layout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    // 获取所有的菜单
    async getMuneList () {
      const { data: res } = await this.$http.get('/menus')
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.menuList = res.data
      // console.log(res)
      // console.log(this.menuList)
    },
    // 是否水平折叠收起菜单
    toggleCollapse () {
      // 使用el的属性：进行折叠
      this.isCollapse = !this.isCollapse
    },
    // 保存链接的激活状态
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      // 问题:当点击其他菜单，再回来点击这菜单时，不会再次出现高亮。解决方案：将点击后的状态记住，更改
      this.activePath = activePath
    }
  },
  created () {
    this.getMuneList()
    // 刷新的时候赋值
    this.activePath = window.sessionStorage.getItem('activePath')
  }
}
</script>

<style lang='less' scoped>
.el-header{
  background-color: #373d41;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-left:0;
  color: #fff;
}
.el-aside{
  background-color: #333744;
  .el-menu{
    border:0

  }
}
.el-main{
  background-color: #eaedf1;
}
.home-container{
  height: 100%;
}
.iconfont{
  margin-right:10px
}
// 折叠菜单的按钮
.toggle-button{
  background-color: #4A5064;
  text-align: center;
  font-size: 15px;
  color:#fff;
  letter-spacing:2px
}
</style>
